<template>
  <div class="block">
    <div class="header">IT培优 · 组织架构</div>
    <Group :currentGroup="groupTree" />
  </div>
</template>

<script>
import Group from "./structureCard.vue";

export default {
  components: { Group },

  data() {
    return {
      groupTree: {},
    };
  },

  created() {
    this.getGroupType();
  },

  methods: {
    async getGroupType() {

      if(window.sessionStorage.getItem("groupTree")!=null){
        this.groupTree = JSON.parse(window.sessionStorage.getItem("groupTree"));
        console.log("已从本地获得GroupTree！",this.groupTree);
        return;
      }
      const res = await this.$axios.get(`${this.HOST}/group/api/groupTree`);
      if (res.data.meta.code == 200) {
        let arr = [];
        arr.push(res.data.data.groupTree);
        this.groupTree = arr;
        console.log("组别获取成功！", this.groupTree);
        window.sessionStorage.setItem("groupTree", JSON.stringify(this.groupTree))
        // console.log(this.queryInfo.groupId);
      } else if (res.status != 200) {
        this.$message({
          message: "获取失败！",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.block {
  width: 75%;
  min-width: 800px;
  margin: auto;

    .header{
    color: white;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    height: 50px;
    margin-bottom: 10px;
  }
}
</style>
